<template>
  <div class="weui-panel full" @click="playSound">
    <div class="weui-tab">
      <div class="weui-tab__bd">
        <div class="weui-tab__bd-item weui-tab__bd-item--active" style="margin-top: 0;" ref="list">
          <div class="weui-cell weui-flex list-title">
            <div class="weui-flex__item" v-for="(t, index) in listTitle" :key="index">{{t}}</div>
          </div>

          <div class="weui-cell weui-flex" v-for="(source, index) in listData" :key="index">
            <div class="weui-flex__item">
              <p v-if="user.lftid === source.lftid">代理本人</p>
              <p v-else>{{source.nickname}}</p>              
            </div>
            <div class="weui-flex__item">
              <p>{{source.buyCount}}</p>
            </div>
            <div class="weui-flex__item">
              <p class="info-grey">{{source._date}}</p> 
              <p>{{source._time}}</p>
            </div>
          </div>

          <div class="no-data" v-show="!listData.length && !loading">暂无数据</div>

          <div class="weui-loadmore" v-show="loading">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WeuiNavBar from '../components/WeuiNavBar'
import { mapState } from 'Vuex'
export default {
  data() {
    return {
      listTitle: ['购买者', '商品数量', '时间'],
      listData: [],
      loading: false,
      offset: 0,
      limit: 50,
      noMore: false
    }
  },
  mounted() {
    // this.fakeData()
    this.query()
    this.initInfinite()
  },
  methods: {
    playSound() {
      window.btn_sound.play();
    },
    fakeData() {
      this.listData = [{buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}, {buyCount: '3'}]
    },
    initInfinite() {
      const listHeight = document.body.offsetHeight + 'px'
      Object.assign(this.$refs.list.style, { height: listHeight, 'overflow-y': 'auto' })
      $(this.$refs.list).infinite().on('infinite', () => {
        if (this.loading) {
          return
        }
        this.offset += this.limit
        this.query()
      });
    },
    query() {
      const send = {
        offset: this.offset,
        limit: this.limit,
        lftid: this.$route.query.lftid
      }
      console.log(send)
      this.loading = true
      this.api.buyHistory.getTeamMemberBuyHistory(send).then(res => res.json()).then(data => {
        console.log(data)
        this.loading = false
        if (data.errorCode) {
          $(this.$refs.list).destroyInfinite()
          return
        }
        this.noMore = data.source.length === 0
        if (this.noMore) {
          $(this.$refs.list).destroyInfinite()
        }
        data.source.forEach(order => {
          order._date = util.getDate(order.createTime)
          order._time = util.getTime(order.createTime)
        });
        this.listData = this.listData.concat(data.source)
      })
    }
  },
  computed: {
    ...mapState(['api', 'user'])
  },
  components: {
    WeuiNavBar
  }
}

</script>

<style lang="less">

</style>